<template>
  <el-card style="margin-bottom: 10px;">
    <div slot="header"><span><i class="fa-solid fa-ticket" /> 内存</span></div>
    <div class="el-table w_100 el-table--fit el-table--striped el-table--border el-table--enable-row-hover el-table--enable-row-transition">
      <table cellspacing="0" style="width: 100%;">
        <thead>
          <tr>
            <th class="el-table__cell is-leaf"><div class="cell">属性</div></th>
            <th class="el-table__cell is-leaf"><div class="cell">内存</div></th>
            <th class="el-table__cell is-leaf"><div class="cell">JVM</div></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="el-table__cell is-leaf"><div class="cell">总内存</div></td>
            <td class="el-table__cell is-leaf"><div v-if="mem" class="cell">{{ mem.total }}G</div></td>
            <td class="el-table__cell is-leaf"><div v-if="jvm" class="cell">{{ jvm.total }}M</div></td>
          </tr>
          <tr>
            <td class="el-table__cell is-leaf"><div class="cell">已用内存</div></td>
            <td class="el-table__cell is-leaf"><div v-if="mem" class="cell">{{ mem.used }}G</div></td>
            <td class="el-table__cell is-leaf"><div v-if="jvm" class="cell">{{ jvm.used }}M</div></td>
          </tr>
          <tr>
            <td class="el-table__cell is-leaf"><div class="cell">剩余内存</div></td>
            <td class="el-table__cell is-leaf"><div v-if="mem" class="cell">{{ mem.free }}G</div></td>
            <td class="el-table__cell is-leaf"><div v-if="jvm" class="cell">{{ jvm.free }}M</div></td>
          </tr>
          <tr>
            <td class="el-table__cell is-leaf"><div class="cell">使用率</div></td>
            <td class="el-table__cell is-leaf"><div v-if="mem" class="cell" :class="{'text-danger': mem.usage > 80}">{{ mem.usage }}%</div></td>
            <td class="el-table__cell is-leaf"><div v-if="jvm" class="cell" :class="{'text-danger': jvm.usage > 80}">{{ jvm.usage }}%</div></td>
          </tr>
        </tbody>
      </table>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'Mem',
  props: {
    mem: {
      type: Object,
      default: () => {
        return {}
      }
    },
    jvm: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
}
</script>

<style scoped lang="scss">

</style>
